Lim's Page

# Debug Tough Front-end Errors by Giving Sentry More Clues

# Group errors your way with fingerprints

Sentry具有聚合相同错误事件的功能。该功能由fingerprint的实现，fingerprint即每个事件对应的一个字符串。 默认情况下，fingerprint由事件堆栈信息hash生成（忽略node_modules和一些库）。如果没有堆栈信息，则由错误信息生成。

  • 堆栈信息（stack trace content）
  • 错误信息（error message）

Rollup and Grouping documentation (opens new window)中深入介绍Sentry如何聚合错误。

默认的fingerprints生成方式适用于大部分情况，但是有时候你使用了一个自定义的错误处理函数，就可能导致不同的错误被聚合在一起，这种情况下就需要手动设置适合fingerprints来区分错误。例如下面示例：

class AsyncComponent extends React.Component {
  componentDidMount() {
    fetch(this.props.endpoint).catch(() => {
      this.setState({
        error: new Error('Unable to load all required endpoints'),
      });
    });
  }
  render() {
    if (this.state.error) {
      return <RouteError error={this.state.error} />; // shows crash dialog
    }
    return this.props.children(this.state);
  }
}

该AsyncComponent会进行网络调用并且捕获网络错误。这个组件中存在的缺点在于：对于不同的API调用失败情况下，生成的错误堆栈是一样的。为了解决这个问题，可以手动设置fingerprints：

Sentry.withScope(scope => {
  scope.setFingerprint([window.location.pathname]);
  Sentry.captureException(error);
});

这样我们就能得知哪个页面中导致出错，获得更有用的聚合方式。

  • 手动设置fingerprints，例如：自定义错误处理函数导致的错误堆栈一致、获得更适合的错误分类方式。

# See the whole picture with breadcrumbs

默认情况下，Sentry browser SDK会自动收集breadcrumbs。从breadcrumbs中可以得知错误发生前的操作。例如：fetch API、DOM交互（点击）和通过console输出的信息等。

可以添加自定义的breadcrumbs信息：

export function openModal(renderer, options) {
  ModalActions.openModal(renderer, options);
  Sentry.addBreadcrumb({
    category: 'ui',
    message: `Opened "${options.title}" modal`,
    level: 'info',
    type: 'user',
  });
}

如果使用状态管理库，可以通过hook的方式自动收集actions或者state变化相关的breadcrumbs。例如Redux，可以使用raven-for-redux的中间件进行收集。

  • 添加breadcrumbs信息

# Filter and segment errors with tags

Tags可以用于快速搜索错误以及观察错误如何影响用户，例如：搜索browser:Firefox。Sentry client SDK自动设置browser和os标签。

可以设置自定义tag：

Sentry.configureScope((scope) => {
  scope.setTag("subscription", subscription.name);
});
  • 添加tag信息
  • 根据tag快速搜索
  • 根据tag分析错误在不同用户间的分布

# Record complex state as additional data

tag可以记录一些简单的state，但它只是一个键值对。可以通过extra data记录复杂的state，例如数组等。extra data不可用于搜索。

Sentry.withScope(scope => {
  scope.setExtra('orgAccess', access);
  Sentry.captureException(error);
});
  • 利用extra data记录复杂state